<template>
	<div class="personCenter">
		<!--手机-->
		<div class="big-hiddle" style="width: 100%;">
			<Row>
				<Col span="24" style="padding: 10px;background-color: white;">
					<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;" >
						<span><img src="../../../../static/img/logo.png"/></span>
						<span @click="goLogin">登录></span>
					</div>
				</Col>
			</Row>
			<div style="width: 100%;height: 10px;background-color: #f7f7f7;"></div>
			<Row>
				<Col span="24" style="padding: 10px;background-color: white;">
					<div @click="goOrder" style="display: flex;justify-content: space-between;padding: 5px;" >
						<span>我的订单</span>
						<span><Icon type="ios-arrow-forward" /></span>
					</div>
				</Col>
			</Row>
			<div style="width: 100%;height: 1px;background-color: #f7f7f7;"></div>
			<Row>
				<Col span="24" style="padding: 10px;background-color: white;">
					<div @click="goPersonInfo" style="display: flex;justify-content: space-between;padding: 5px;" >
						<span>个人信息</span>
						<span><Icon type="ios-arrow-forward" /></span>
					</div>
				</Col>
			</Row>
			<div style="width: 100%;height: 150px;background-color: #f7f7f7;"></div>
			<Row>
				<Col span="24" style="padding: 10px;background-color: #f7f7f7;">
					<div style="display: flex;justify-content: center;padding: 10px;" >
						<Button style="width: 100%;background-color: #009a00;" size="large" type="success" >退出登录</Button>
					</div>
				</Col>
			</Row>
			
		</div>
		
		
		<!--个人中心-->
		<div class="small-hiddle" style="background-color: #f7f7f7;width: 100%;">
			<Row type="flex" align="middle" justify="center" style="height: 40px;">
				<Col  style="width: 1200px;text-align: left;padding-left: 10px;">
					<span>
						<span>首页</span>
						<span>></span>
						<span>{{toggle}}</span>
					</span>
				</Col>
			</Row>
		</div>
		<div class="small-hiddle" style="background-color: #f7f7f7;width: 100%;">
			<div style="width: 1200px;margin: 0 auto;">
				<Row type="flex"  justify="center" >
					<Col span="6" style="text-align: center;padding: 10px;">
						<div style="width: 100%;background-color: white;">
							<div @click="menuToggle('我的订单')" class="buttonHover" >
								<span>我的订单</span>
								<span><Icon type="ios-arrow-forward" /></span>
							</div>
							<div style="width: 100%;height: 1px;background-color: #f7f7f7;"></div>
							<div @click="menuToggle('个人信息')" class="buttonHover">
								<span>个人信息</span>
								<span><Icon type="ios-arrow-forward" /></span>
							</div>
							<div style="width: 100%;height: 1px;background-color: #f7f7f7;"></div>
							<div class="buttonHover">
								<span>退出</span>
								<span><Icon type="ios-arrow-forward" /></span>
							</div>
						</div>
					</Col>
					<Col span="18" style="text-align: center;padding: 10px;">
						<div v-if="toggle == '个人信息'" style="height: 400px;width: 100%;background-color: white;display: flex;align-items: center;justify-content: center;">
							<div>
								<div style="padding: 10px;">
									姓名：
									<Input v-model="value" placeholder="" style="width: 250px" />
								</div>
								<div style="padding: 10px;"> 
									电话：
									<Input v-model="value" placeholder="" style="width: 250px" />
								</div>
								<div style="padding: 10px;">
									地址：
									<Input v-model="value" placeholder="" style="width: 250px" />
								</div>
								<div style="padding: 10px;">
									说明：如果要更改相应的内容，请在输入框中直接修改
								</div>
								<div style="padding: 10px;">
									<Button style="width: 280px;background-color: #009a00;" type="success">保存</Button>
								</div>
								
							</div>
						</div>
						<div v-if="toggle == '我的订单'" style="width: 100%;background-color: white;padding: 10px;">
							<div>
								 <Tabs value="name1">
							        <TabPane label="全部订单" name="name1" style="">
								        	<div v-for="item,index in 3" :key="index" style="width: 100%;padding: 10px;">
								        		<Card>
									                <p slot="title">
									                	创建时间：xxxxxxxxx  订单号：xxxxxxxxx
									                </p>
									                <div style="width: 100%;">
									                	<Row type="flex" align="middle" justify="center" >
															<Col span="8" style="text-align: center;padding: 10px;">
																<p>
																	家庭保洁-临时保洁
																</p>
																<p>
																	1人/3小时/144元
																</p>
															</Col>
															<Col span="8" style="text-align: center;padding: 10px;border-left: 1px solid #f7f7f7;border-right: 1px solid #f7f7f7;">
																<p>
																	称呼：张三
																</p>
																<p>
																	电话：13777777777
																</p>
																<p>
																	地址：厦门市集美区
																</p>
															</Col>
															<Col span="8" style="text-align: center;padding: 10px;">
																<p>
																	￥：144元
																</p>
															</Col>
														</Row>
									                </div>
									            </Card>
								        	</div>
							        </TabPane>
							        <TabPane label="待处理" name="name2"></TabPane>
							        <TabPane label="处理中" name="name3"></TabPane>
							        <TabPane label="完成" name="name4"></TabPane>
							    </Tabs>
								
							</div>
						</div>
					</Col>
				</Row>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				value:"",
				toggle:'个人信息',
			}
		},
		methods:{
			menuToggle:function(value){
				this.toggle = value;
			},
			goOrder:function(){
				this.$router.push("/personCenter/mobileOrder")
			},
			goPersonInfo:function(){
				this.$router.push("/personCenter/mobilePersonInfo")
			},
			goLogin:function(){
				this.$router.push("/login")
			}
		}
	}
</script>

<style lang="css" scoped>
	/*电脑*/
	@media only screen and (min-width: 540px){
		.personCenter >>> .buttonHover{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			padding:0px 20px;
			justify-content: space-between;
		}
		.personCenter >>> .buttonHover:hover{
			background-color: #009a00;
			color: white;
		}
		.personCenter >>> .ivu-tabs-nav .ivu-tabs-tab-active{
			color: #009a00 !important;
		}
		.personCenter >>> .ivu-tabs-ink-bar{
			background-color: #009a00 !important;
		}
		.personCenter >>> .ivu-tabs-nav .ivu-tabs-tab:hover{
			color: #009a00 !important;
		}
		.personCenter >>> .ivu-card-head{
			padding: 7px 16px;
		    text-align: left !important;
		    background-color: #f7f7f7 !important;
		}
		.personCenter >>> .big-hiddle{
			display: none;
		}
	}
	/*手机*/
	@media only screen and (max-width: 540px) {
		.personCenter >>> .small-hiddle{
			display: none;
		}
	}
</style>